<!-- 2022-12-8 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条练习</title>
    <!-- 通过css设置样式 -->
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        /* 设置nav大小 */
        .nav{
            width:1205px;
            height:48px;
            background-color: #E8E7E3;
            /* 设置外边距 */
            margin:100px auto;
        }
        /* 设置nav中的li */
        .nav li{
            /* 使li水平向左浮动，使菜单横向排列 */
            float:left;
            
            /* 设置li的高度由文字决定，和父元素高度一样 */
            height: 48px;
            /* 将文字在父元素里垂直居中；行高和父元素高度一样：效果就是垂直居中（不理解）？？ */
            line-height: 48px;
        }
        /* 设置a的样式 */
        .nav a{
            
            /* 将a转换为块元素 */
            display:block;
            /* 去掉下划线 */
            text-decoration: none;
            /* 设置字体颜色 */
            color:#777777;
            /* 修改字体大小 */
            font-size: 18px;
            /* 设置文字内边距 */
            padding:0 39px ;
        }
        /* 设置鼠标移入效果 */
        .nav a:hover{
            background-color: #3F3F3F;
            color:#E8E7E3
        }
    </style>
</head>
<body>
    <!-- 先分析结构 -->
    <!-- 创建导航条结构 -->
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Browser Side</a>
        </li>
        <li>
            <a href="#">Server Side</a>
        </li>
        <li>
            <a href="#">Programming</a>
        </li>
        <li>
            <a href="#">XML</a>
        </li>
        <li>
            <a href="#">Web Building</a>
        </li>
        <li>
            <a href="#">Reference</a>
        </li>

    </ul>


    
</body>
</html>